<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #left>
        <!-- <span>总记录数: {{ total }} 条</span> -->
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="addCoupon">新增优惠券</el-button>
      </template>
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table :data="couponList" border>
        <el-table-column label="序号" type="index" fixed="left" width="60" sortable />
        <el-table-column label="名称" prop="coupon_name" width="100" />
        <el-table-column label="满多少可用" prop="limit_min_money" width="100" />
        <el-table-column label="优惠金额" prop="money" width="100" />
        <el-table-column label="有效时间" prop="term" width="100" />
        <el-table-column label="开始时间" width="110" sortable>
          <template #default="{ row }">{{ row.start_time | formatTime }}</template>
        </el-table-column>
        <el-table-column label="结束时间" width="110" sortable>
          <template #default="{ row }">{{ row.end_time | formatTime }}</template>
        </el-table-column>
        <el-table-column label="状态" :formatter="formatStatus" width="100" />
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editCoupon(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <add ref="AddDialog" @refresh="getCouponList" />
    <edit ref="EditDialog" @refresh="getCouponList" />
  </div>
</template>

<script>
import { getCouponUserList } from '@/api/coupon'
import Add from './components/Add.vue'
import Edit from './components/Edit.vue'
export default {
  name: 'CouponUserList',
  components: {
    Add,
    Edit
  },
  data() {
    return {
      isLoading: 0,
      couponList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCouponList()
  },
  mounted() {},
  methods: {
    addCoupon() {
      this.$refs.AddDialog.open()
    },
    editCoupon(row) {
      this.$refs.EditDialog.open(row)
    },
    formatStatus(row) {
      let res
      switch (row.status) {
        case 1: res = '未使用'; break
        case 2: res = '已使用'; break
        case -1: res = '已过期'; break
      }
      if (row.status === 1) {
        // 也有可能过期
        const time = new Date(row.end_time).getTime() - new Date(row.start_time).getTime()
        if (time > row.term * 3600 * 24 * 1000) {
          res = '已过期'
        }
      }
      return res
    },
    async getCouponList() {
      try {
        this.isLoading++
        this.couponList = await getCouponUserList(this.$route.query)
      } finally {
        this.isLoading--
      }
    }
    // indexMethod(index) {
    //   return index + 1 + (this.page - 1) * this.size
    // },
    // handleSizeChange() {},
    // handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.recharge-box {
  list-style: none;
  li {
    display: flex;
    span {
      width: 100px;
    }
  }
}
.img-item {
  height: 80px;
  margin: 0 5px;
}
</style>
